<template>
  <div>
    {{count}}
    {{count2}}
  </div>
</template>

<script>
// composition-api
import { reactive, ref, toRefs } from 'vue'
export default {
  // vue2 Object.defineProperty
  // vue3 ES6 Proxy
  setup() { // === beforeCreate, created
    const state = reactive({
      count: 0
    })

    const count2 = ref(0)

    console.log(count2.value)

    // 这样写是不行的
    let { count } = toRefs(state)

    setTimeout(() => {
      state.count = 100
    }, 2000)

    // 返回值
    return {
      count,
      count2
    }
  }
}
</script>

<style lang='stylus' scoped>

</style>